<template>
	<view>
		<index-tabbar :tabBars="tabBars" @TarTap="TarData" :tabIndex="tabIndex"></index-tabbar>
		<view class="tab_content_box">
			<view v-if="tabIndex == 0" class="list_content">
				<list-box class="list_yourself" :allData="listData[0]" :tab-flag="tabIndex" @btnClick="btnClick"
					@deleteClick="deleteClick"></list-box>
			</view>
			<view v-else-if="tabIndex == 1" class="list_content"> <list-box :allData="listData[1]" @btnClick="btnClick"
					:tab-flag="tabIndex" @deleteClick="deleteClick"></list-box>
			</view>
			<view v-else-if="tabIndex == 2" class="list_content"> <list-box :allData="listData[2]" @btnClick="btnClick"
					:tab-flag="tabIndex"></list-box>
			</view>
			<view class="no_list" v-show="noList">
				暂无数据
			</view>
		</view>
		<!-- 删除弹框 -->
		<uni-popup ref="deletePopup" background-color="" :mask-click="false">
			<view class="delete_Box">
				<view class="delete_title">
					<text>请填写取消接诊原因</text>
				</view>
				<input class="delete_input" type="text" placeholder="请输入" v-model="deleteValue" />
				<view class="delete_btn">
					<button size="mini" @click="maskDelete(0)">取消</button><button size="mini" type="primary"
						@click="maskDelete(1)">删除</button>
				</view>
			</view>
		</uni-popup>
		<!-- 复诊弹框 -->
		<uni-popup ref="fuzhenPopup" background-color="" @change="change">
			<div class="fuzhen_content">
				<uni-forms-item label="患者姓名" label-width="100px" required>
					<uni-easyinput v-model="baseFormData.name" disabled="true" @input="nameChange" />
				</uni-forms-item>
				<uni-forms-item label="联系方式" label-width="100px" required>
					<view class="mobileInput">
						<uni-easyinput class="" v-model="baseFormData.mobile" disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="性别" label-width="100px" required>
					<uni-data-checkbox class="sexInput" v-model="baseFormData.sex" :localdata="sexs" disabled="true" />
				</uni-forms-item>
				<uni-forms-item label="接诊类型" label-width="100px" required>
					<uni-easyinput v-model="baseFormData.type" disabled="true" @input="nameChange" />
				</uni-forms-item>
				<uni-forms-item label="预约医生" label-width="100px" required>

					<picker mode="selector" @change="administrativeDocterChange"
						:value="baseFormData.administrativeDocter" :range="administrativeDocterArray">
						<uni-easyinput v-model="baseFormData.administrativeDocter" placeholder="请选择预约医生" />
					</picker>
				</uni-forms-item>
				<uni-forms-item label="预约日期" label-width="100px" required>
					<uni-datetime-picker type="time" v-model="baseFormData.date" @change="changeLog" />
				</uni-forms-item>
				<uni-forms-item label="预约备注" label-width="100px">
					<uni-easyinput v-model="baseFormData.remark" placeholder="请输入备注" @input="nameChange" />
				</uni-forms-item>
				<div class="fuzhen_btn">
					<button @click="confirmClick(0)">取消</button><button @click="confirmClick(1)">确定</button>
				</div>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	import indexTabbar from './topTabBar.vue';
	import listBox from "./list.vue";
	import {
		getClinicalReception,
		deleteYuyue,
		treatedConfirm,
		toRecall,
		userSelector
	} from "@/api/home/index.js";
	export default {
		components: {
			indexTabbar,
			listBox
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [{
						name: "待接诊",
						id: 0
					},
					{
						name: "接诊中",
						id: 1
					},
					{
						name: "已接诊",
						id: 2
					}
				],
				currentTabComponent: "GuanZhu",
				listData: [
					[],
					[],
					[]
				],
				noList: false,
				deleteMask: false,
				deleteValue: "",
				deleteList: {},
				deleteFlag: 0,
				baseFormData: {
					name: "",
					mobile: "",
					sex: "",
					type: "复诊",
					administrativeDocter: "",
					date: "",
					remark: "", //备注
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				administrativeDocterArray: [],
				doctorTimeAll:[],
				doctorAllData:[],
				yuyueTime:[],
				fuzhenObj:{}
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(val = 0) {
				getClinicalReception({
					visitStatus: String(val + 1)
				}).then(res => {
					if (res.code == 200) {
						this.listData[val] = res.data.records
						this.noList = res.data.records.length == 0 ? true : false;
					} else {
						uni.showToast({
							title: '失败',
							icon: "error"
						});
					}
				})
			},
			TarData(item) {
				//设置id，来显示选中那个标签，显示下划线
				this.tabIndex = item.id;
				//显示标签对应的组件内容
				this.currentTabComponent = item.id
				let query = uni.createSelectorQuery().in(this);
				let dom = query.select(".list_content")
				dom.fields({
					rect: true,
					scrollOffset: true
				}, function(res) {}).exec(function(eres) {})
				this.init(item.id);

			},
			// 复诊，接诊的点击事件
			btnClick(item) {
				if (this.tabIndex == 0) {
					// 提交到接诊中
					treatedConfirm({
						id: item.id
					}).then(res => {
						console.log(res);
						if (res.code == 200) {
							this.init();
							uni.navigateTo({
								url: `/pages/view/doctorVisit/doctorVisit?id=${item.id}&patientId=${item.patientId}`,
							})
						}
					})
				}
				if (this.tabIndex == 1) {
					uni.navigateTo({
						url: `/pages/view/doctorVisit/doctorVisit?id=${item.id}&patientId=${item.patientId}`,
					})
				}
				if (this.tabIndex == 2) {
					if (item.visitStatus == "已接诊" && item.settlementState == 1) {
						uni.showModal({
							title: '提示',
							// 提示文字
							content: '是否继续处方召回？',
							// 取消按钮的文字自定义
							cancelText: "取消",
							// 确认按钮的文字自定义
							confirmText: "确定",
							//删除字体的颜色
							confirmColor: '#000fff',
							//取消字体的颜色
							cancelColor: '#000000',
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
									toRecall({
										id: item.id
									}).then(callRes => {
										if (callRes.code != 200) {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											})
											this.init();
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'success',
												duration: 2000
											})
										}
									})
								} else {
									// 执行取消后的操作
								}
							}
						})
					} else if (item.visitStatus == "已接诊" && item.settlementState == 2) {
						this.getDoctor(item.deptId);
						this.$refs.fuzhenPopup.open("bottom")
						this.baseFormData.name = item.name;
						this.baseFormData.mobile = item.tel;
						this.baseFormData.sex = item.gender == 1 ? 0 : 1;
						this.fuzhenObj = item;
					}
					console.log(item, '已接诊');
				}
			},
			deleteClick(obj) {
				console.log(obj.item.id);
				this.$refs.deletePopup.open("center")
				this.deleteList = obj.item;
				this.deleteFlag = obj.flag;
			},
			maskDelete(val) {
				if (val == 0) {
					this.$refs.deletePopup.close()
					this.deleteValue = "";
					// 取消
				} else if (val == 1) {
					// 删除
					deleteYuyue({
						id: this.deleteList.id,
						baseIdInput: this.deleteValue
					}).then(res => {
						console.log(res);
						if (res.code == 200) {
							this.init(this.deleteFlag)
							this.tabIndex = 1;
							this.$refs.deletePopup.close()
							this.deleteValue = "";
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '删除失败',
								icon: 'none',
								duration: 2000
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '请求超时，请重试',
							icon: 'none',
							duration: 2000
						})
					})

				}
			},

			// 获取医生数据的
			getDoctor(val) {
				userSelector({
					DeptId: val
				}).then(doctorRes => {
					console.log(doctorRes, 'res');
					if (doctorRes.code == 200) {
						this.doctorAllData = doctorRes.data;
						let doctorArr = [];
						let timeArr = [];
						let startEndTime = [];
						startEndTime[0] =
							doctorRes.data.forEach((item, index) => {
								doctorArr.push(item.name);
								let smallTime = [];
								let smallTimes = [];
								smallTimes[0] = new Date(`${year}-${month}-${day} ${item.shifts.begin}`)
									.getHours();
								smallTimes[1] = new Date(`${year}-${month}-${day} ${item.shifts.end}`)
									.getHours();
								smallTime[index] = [];
								for (let i = smallTimes[0]; i <= smallTimes[1]; i++) {
									smallTime[index].push({
										text: `${i}:00 余${item.shifts.quantity}`,
										value: i,
										time: `${i}:00`
									})
								}
								this.doctorTimeAll = smallTime;
							})
						this.administrativeDocterArray = doctorArr;
					}
				})
			},
			administrativeDocterChange(e) {
				this.baseFormData.administrativeDocter = this.administrativeDocterArray[Number(e.detail.value)]
				this.yuyueTime = this.doctorTimeAll[Number(e.detail.value)]
				this.baseFormData.deptList = this.doctorAllData[Number(e.detail.value)]
			},
			// 预约日期的点击事件
			dateClcik() {
				this.$refs.datePopup.open('bottom');
			},
			changeLog() {

			},
			confirmClick(val) {
				if (val == 0) {
					// 取消
					this.$refs.fuzhenPopup.close()
				} else {
					// 确定
					let params = {
						patient: {
							city:this.fuzhenObj.city,
							address:this.ageValue.address,
							age: this.fuzhenObj.ageValue,
							area: this.ageValue.area,
							certno: this.fuzhenObj.certno,
							fixPhone: this.fuzhenObj.fixPhone,
							gender: this.fuzhenObj.gender,
							id: this.fuzhenObj.peopleList.id,
							isGravida: this.fuzhenObj.isGravida,
							isLactation: this.fuzhenObj.isLactation,
							name: this.fuzhenObj.name,
							occupation: this.fuzhenObj.occupation,
							province: this.fuzhenObj.province,
							tel: this.fuzhenObj.tel
						},
						patnRlts: [],
						reservation: {
							deptId: this.fuzhenObj.deptId,
							deptName: this.fuzhenObj.deptName,
							id: this.fuzhenObj.id,
							userId: this.fuzhenObj.administrativeDocter,
							name: this.fuzhenObj.peopleList.name,
							registrationFee: this.fuzhenObj.registrationFee,
							time: this.fuzhenObj.time,
						}
					}
					addYuyue(params).then(res => {})
					this.init();
					this.$refs.fuzhenPopup.close()
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.tab_content_box {
		height: calc(100vh - 114rpx);
		background-color: #eee;
		overflow-y: auto;
	}

	.no_list {
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #999;
	}

	.delete_Box {
		width: 340rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.delete_title {
			width: 100%;
			padding: 10rpx 0;
			text-align: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #666;
		}

		.delete_input {
			border: 2rpx solid #ccc;
			padding: 10rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
		}

		.delete_btn {
			padding: 10rpx 0 0 0;
			display: flex;
			justify-content: space-between;
		}
	}

	.fuzhen_content {
		height: 66vh;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		overflow-y: auto;

		.fuzhen_btn {
			display: flex;
			padding: 20rpx 0;
			align-items: center;

			button {
				flex: 1;
				margin: 0 20rpx;

				&:nth-child(1) {
					border: 2rpx solid #000fff;
					color: #000fff;
				}

				&:nth-child(2) {
					background-color: #000fff;
					color: #fff;
				}
			}
		}
	}
</style>